<template>
  <div>
    <el-form :model="generalForm" :rules="generalFormRoles" ref="generalForm" label-width="10em">
      <h-box header="设置通用积分规则">
        <el-form-item label="积分获得比例" required>
          <el-form-item style="display: inline-block;" prop="_costMomeyUnit">
            <el-input @change="onChangeYuan2Fen('costMomeyUnit')" v-model.number="generalForm._costMomeyUnit" placeholder="请输入" style="width: 254px;">
              <template slot="prepend">消费每满</template>
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <span class="hui-mx-8px">，</span>
          <el-form-item style="display: inline-block;" prop="increaseBonus">
            <el-input v-model.number="generalForm.increaseBonus" placeholder="请输入" style="width: 240px;">
              <template slot="prepend">赠送</template>
              <template slot="append">积分</template>
            </el-input>
          </el-form-item>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>“消费每满”以实际付款金额计算</li>
            <li>“实际付款金额 / 消费每满”的值有小数位时，只保留整数，并以该数值 * 赠送积分系数，计算结果为实际赠送积分分值</li>
            <li>仅限填写整数，填 0 不会根据消费金额赠送积分</li>
            <li>建议设置为消费每满 1 元，赠送 1 积分</li>
          </ul>
        </el-form-item>
        <el-form-item label="每次获得数量限制" prop="maxIncreaseBonus">
          <el-input v-model.number="generalForm.maxIncreaseBonus" placeholder="请输入" style="width: 150px;">
            <template slot="append">积分</template>
          </el-input>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>根据积分获得比例计算后的结果，如大于每次获得数量限制，将以每次获得数量限制为实际发送积分的分值</li>
            <li>仅限填写整数，填 0 不会限制</li>
            <li>后台手工调整积分无此项限制</li>
          </ul>
        </el-form-item>
        <el-form-item label="每天获得数量限制" prop="maxIncreaseBonusDaily">
          <el-input v-model.number="generalForm.maxIncreaseBonus" placeholder="请输入" style="width: 150px;">
            <template slot="append">积分</template>
          </el-input>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>根据用户当天已获得积分数量判断，如当天已获得数量超出限制，将不会继续赠送积分</li>
            <li>仅限填写整数，填 0 不会限制</li>
            <li>后台手工调整积分无此项限制</li>
          </ul>
        </el-form-item>
        <el-form-item label="积分保护期" prop="locked">
          <el-input v-model.number="generalForm.locked" placeholder="请输入" style="width: 150px;">
            <template slot="append">天</template>
          </el-input>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>获得后积分后，将进入保护期，在保护期内，该笔积分无法使用</li>
            <li>如保护期设为 0 天，则获得后立即可使用</li>
            <li>建议设置为 1 天保护期</li>
            <li>后台手工调整积分无此项限制</li>
            <li>该功能为了避免顾客下单后获得积分，将积分使用后，再退单的情况所导致的商户损失</li>
          </ul>
        </el-form-item>
        <el-form-item label="积分有效期" prop="expiry">
          <el-select v-model.number="generalForm.expiry" placeholder="请选择" style="width: 250px;">
            <el-option :value="0" label="永不过期"></el-option>
            <el-option :value="1" label="获得之日 至 明年 的 12月31日"></el-option>
            <el-option :value="2" label="获得之日 至 后年 的 12月31日"></el-option>
          </el-select>
        </el-form-item>
      </h-box>
      <h-box header="设置积分抵扣规则">
        <el-form-item label="抵扣规则" required>
          <el-form-item style="display: inline-block;" prop="costBonusUnit">
            <el-input v-model.number="generalForm.costBonusUnit" placeholder="请输入" style="width: 240px;">
              <template slot="prepend">每使用</template>
              <template slot="append">积分</template>
            </el-input>
          </el-form-item>
          <span class="hui-mx-8px">，</span>
          <el-form-item style="display: inline-block;" prop="_reduceMoney">
            <el-input @change="onChangeYuan2Fen('reduceMoney')" v-model.number="generalForm._reduceMoney" placeholder="请输入" style="width: 240px;">
              <template slot="prepend">抵扣</template>
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>金额最多两位小数，任意一项填 0 ，则不可抵扣消费金额</li>
            <li>积分所抵扣的金额 <b>小于等于</b> 订单金额</li>
            <li>例子1：如您填写了每使用 100 积分， 抵扣 1 元，用户用 50 积分，不能抵扣 0.5 元</li>
            <li>例子2：如您填写了每使用 1 积分， 抵扣 0.01 元，用户用 50 积分，可以抵扣 0.5 元</li>
          </ul>
        </el-form-item>
        <el-form-item label="抵扣订单" prop="_leastMoneyToUseBonus">
          <el-input @change="onChangeYuan2Fen('leastMoneyToUseBonus')" v-model.number="generalForm._leastMoneyToUseBonus" placeholder="请输入" style="width: 240px;">
            <template slot="prepend">满</template>
            <template slot="append">元可抵扣</template>
          </el-input>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>金额最多两位小数，填 0 则不限，所有订单都可抵扣</li>
            <li>设置合适的抵扣订单限制，有助于提升客单价</li>
          </ul>
        </el-form-item>
        <el-form-item label="每单限用" prop="maxReduceBonus">
          <el-input v-model.number="generalForm.maxReduceBonus" placeholder="请输入" style="width: 280px;">
            <template slot="prepend">单笔最多使用</template>
            <template slot="append">积分</template>
          </el-input>
          <ul class="hui-color-text-secondary hui-font-size-small hui-pl-1" style="line-height: 1.5;">
            <li>仅限填写整数，填 0 则不限</li>
            <li>设置合适的每单限用积分数量，可避免异常获取的积分造成的商户损失</li>
          </ul>
        </el-form-item>
      </h-box>
      <h-box>
        <el-form-item slot="footer" class="hui-mb-0">
          <el-button @click="handleSubmit('generalForm')" :loading="loading" type="primary">保存</el-button>
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </h-box>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      generalForm: {
        costMoneyUnit: 0,
        _costMomeyUnit: 0,
        increaseBonus: 0,
        maxIncreaseBonus: 0,
        maxIncreaseBonusDaily: 0,
        locked: 0,
        expiry: 0,
        costBonusUnit: 0,
        reduceMoney: 0,
        _reduceMoney: 0,
        leastMoneyToUseBonus: 0,
        _leastMoneyToUseBonus: 0,
        maxReduceBonus: 0
      },
      generalFormRoles: {
        _costMomeyUnit: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }],
        increaseBonus: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }],
        maxIncreaseBonus: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }],
        maxIncreaseBonusDaily: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }],
        locked: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }],
        expiry: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'change'
        }],
        costBonusUnit: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }],
        _reduceMoney: [{
          required: true,
          type: 'number',
          min: 0,
          message: '仅限数字格式',
          trigger: 'blur'
        }, {
          validator: this.$validateAmount,
          trigger: 'blur'
        }],
        _leastMoneyToUseBonus: [{
          required: true,
          type: 'number',
          min: 0,
          message: '仅限填写整数',
          trigger: 'blur'
        }, {
          validator: this.$validateAmount,
          trigger: 'blur'
        }],
        maxReduceBonus: [{
          required: true,
          type: 'integer',
          message: '仅限填写整数',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {},
  methods: {
    // 元变分
    onChangeYuan2Fen (label) {
      switch (label) {
        case 'costMoneyUnit':
          this.generalForm.costMoneyUnit = this.generalForm._costMoneyUnit * 100
          console.log(label, this.generalForm.costMoneyUnit)
          break
        case 'reduceMoney':
          this.generalForm.reduceMoney = this.generalForm._reduceMoney * 100
          console.log(label, this.generalForm.reduceMoney)
          break
        case 'leastMoneyToUseBonus':
          this.generalForm.leastMoneyToUseBonus = this.generalForm._leastMoneyToUseBonus * 100
          console.log(label, this.generalForm.leastMoneyToUseBonus)
          break
      }
    },

    // 返回
    handleBack () {
      this.$router.back()
    },

    // 表单校验
    handleSubmit (formName) {
      this.$formSubmit(formName).then(() => {
        console.log('表单校验成功，提交')
        this.$loading()
        this.loading = true
        setTimeout(() => {
          this.$message({
            message: '通用积分规则保存成功！',
            type: 'success'
          })
          this.handleBack()
          this.$loading().close()
        }, 1000)
      }).catch(() => {
        console.log('表单校验失败！')
        this.$message({
          message: '必要的信息没填写完整, 请检查!',
          type: 'warning'
        })
        this.loading = false
      })
    }
  }
}
</script>
